<template>
	<!-- 我的课程 -->
	<view @touchmove.stop.prevent="() => {}">
		<baseHead title="我的课程" :showReturn="true" :right="false">
			<template slot="textnr">
				<view style="
            width: 100%;
            background-color: #ffffff;
            position: fixed;
            z-index: 999;
	
          ">
					<u-sticky bgColor="#fff">
						<u-tabs :list="list" :activeStyle="activeStyle" :lineColor="'#3476FE'" :scrollable="false"
							:current="current" @click="clickTab"></u-tabs>
					</u-sticky>
				</view>
			</template>
		</baseHead>


		<!-- <view class="box"> -->
		<scroll-view scroll-y class="scroll" v-if="KeCheng.length>0"
			:style="{'height':windowHeight-50-statusBarH+'px','margin-top':45+'px'}">
			<view class="contentbox">
				<view v-for="(item,index) in KeCheng" :key="index" class="item_box">
					<view @click="clickDetails(item,0)">
						<courseCourse :objectData="item" :QuantityName="'已购买'">

						</courseCourse>
					</view>

					<view class="shuqian" v-if="item.IsProbation">
						免费试听
					</view>
					<view class="shuqian" v-else-if="item.Type==0">
						线上
					</view>
					<view class="shuqian" v-else-if="item.Type==1">
						线下
					</view>
					<view class="shuqian" v-else-if="item.Type==2">
						word
					</view>
				</view>

			</view>
			<u-loadmore :status="status" style="padding-bottom: 40rpx;" />
		</scroll-view>
		<u-empty v-else mode="data" icon="/static/recruit/index/qsy.png" :width="windowWidth" marginTop="150">
		</u-empty>


		<!-- </view> -->
	</view>
</template>

<script>
	import baseHead from "@/pages/component/baseHead.vue";
	import courseCourse from "@/pages/views/packageD/template/courseCourse.vue"
	export default {
		data() {
			return {
				list: [{
						name: '已收藏',
						id: 0
					},
					{
						name: '已报名',
						id: 1
					},
					{
						name: '已购买',
						id: 2
					}
				],
				current: 0,
				URL: this.$config.domain.staticUrl,
				statusBarH: '',
				windowHeight: '',
				windowWidth: '',
				activeStyle: {
					color: '#3476FE',
				},
				state: 0,

				Title: "",
				PageIndex: 1,
				PageSize: 10,
				KeCheng: [], //数据
				status: 'loadmore',


			}
		},
		components: {
			baseHead,
			courseCourse
		},
		onShow() {
			const app = getApp()
			this.statusBarH = app.globalData.customBarH //状态栏高度
			this.windowHeight = app.globalData.phoneInformation.windowHeight //屏幕高度
			this.windowWidth = app.globalData.phoneInformation.windowWidth
		},
		created() {
			this.myKeCheng()
		},
		methods: {
			clickTab(e) {
				console.log(e);
				if (this.current == e.id) return
				this.current = e.id;
				this.PageIndex = 1
				this.status = 'loadmore'
				this.KeCheng = []
				this.myKeCheng()
			},
			// 页面滚动到底部事件
			scrolltolower() {
				// 加载前值为loadmore，加载中为loading，没有数据为nomore
				if (this.status != "nomore") {
					this.status = "loading";
					this.myKeCheng();
				}
			},
			myKeCheng() {
				let obj = {
					Title: this.Title,
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
				}
				let obj1 = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
				}
				//已收藏
				if (this.current == 0) {
					this.$http.digitalize.collectionList(obj).then(res => {
						if (res.Success) {
							if (res.Result.Items.length == 0) {
								// 没有数据----
								this.status = "nomore";
								return;
							}
							this.KeCheng = this.KeCheng.concat(res.Result.Items);
							if (res.Result.Items.length >= this.PageSize) {
								this.PageIndex++;
								// 表示还有数据
							} else {
								//没有更多数据了
								this.status = "nomore";
							}
						}
					})
				}
				// 已报名
				else if (this.current == 1) {
					this.$http.digitalize.my_enroll(obj1).then(res => {
						if (res.Success) {
							if (res.Result.Items.length == 0) {
								// 没有数据----
								this.status = "nomore";
								return;
							}
							this.KeCheng = this.KeCheng.concat(res.Result.Items);
							if (res.Result.Items.length >= this.PageSize) {
								this.PageIndex++;
								// 表示还有数据
							} else {
								//没有更多数据了
								this.status = "nomore";
							}
						}
					})
				}
				// 已购买
				else {
					this.$http.digitalize.my_buy(obj1).then(res => {
						if (res.Success) {
							if (res.Result.Items.length == 0) {
								// 没有数据----
								this.status = "nomore";
								return;
							}
							this.KeCheng = this.KeCheng.concat(res.Result.Items);
							if (res.Result.Items.length >= this.PageSize) {
								this.PageIndex++;
								// 表示还有数据
							} else {
								//没有更多数据了
								this.status = "nomore";
							}
						}
					})
				}
			},
			clickDetails(item) {
				console.log(item);
				if (item.IsProbation) {
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/details?id=${item.CourseId}&index=${0}`,
					});
				} else if (item.Type == 1) {
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/OfflineCourseDetails?id=${item.CourseId}`,
					});
				} else {
					uni.navigateTo({
						url: `/pages/views/packageD/type-jobhunting/shuzihua/details?id=${item.CourseId}&index=${2}`,
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.contentbox {
		padding: 20rpx;
		margin-bottom: 30px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;


		.item_box {
			width: 48%;
			margin-bottom: 20rpx;
			position: relative;
			background-color: #fff;
			border-radius: 10rpx;

			.shuqian {
				position: absolute;
				left: 9rpx;
				top: 12rpx;
				width: 99rpx;
				height: 32rpx;
				background: #E0AF3C;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				opacity: 1;

				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

	}
</style>